<template>
  <div class="literature-page">
    <!-- 筛选条件区域 -->
    <div class="filter-section">
      <div class="filter-header" @click="toggleFilters">
        <h3>论文分类</h3>
        <span class="toggle-icon" :class="{ expanded: filtersExpanded }">▼</span>
      </div>

      <div class="filter-content" :class="{ expanded: filtersExpanded }">
        <!-- 分类筛选 -->
        <div class="filter-group">
          <label class="filter-label">分类</label>
          <div class="filter-options">
            <button
              v-for="item in classificationOptions"
              :key="item.categoryCode"
              @click="selectFilter('category', item.categoryCode)"
              :class="['filter-option', { active: searchParams.category === item.categoryCode }]"
            >
              {{ item.categoryName }}
            </button>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="filter-actions">
          <button @click="clearFilters" class="clear-btn">清除筛选</button>
        </div>
      </div>
    </div>

    <!-- 结果统计 -->
    <div class="results-header">
      <div class="results-info">
        <span>共找到 {{ pages }} 篇论文</span>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-show="loading" class="loading">
      <div class="spinner"></div>
      <p>正在加载论文数据...</p>
    </div>

    <!-- 空状态 -->
    <div v-show="!loading && dataList.length === 0" class="empty-state">
      <div class="empty-icon">📄</div>
      <h2 class="empty-title">暂无论文</h2>
      <p class="empty-desc">该分类下暂无任何论文</p>
    </div>

    <!-- 论文列表 -->
    <div v-show="!loading && dataList.length > 0" class="literature-list">
      <div
        v-for="paper in dataList"
        :key="paper.id"
        class="literature-item"
        @click="viewLiterature(paper)"
      >
        <div class="paper-content">
          <h3 class="paper-title">{{ paper.title }}</h3>
          <div class="paper-meta">
            <div class="paper-authors">
              <span class="meta-label">作者：</span>
              <span class="meta-value">{{ paper.authors || '未知' }}</span>
            </div>
            <div class="paper-subjects">
              <span class="meta-label">学科：</span>
              <span class="meta-value">{{ paper.subjects || '未知' }}</span>
            </div>
          </div>
        </div>
        <div class="paper-link">
          <span class="link-icon">→</span>
        </div>
      </div>
      <!-- 分页 -->
      <div class="flex justify-center margin-top-20">
        <n-pagination
          v-model:page="pageNum"
          :page-count="pages"
          size="large"
          :on-update:page="pageUpdate"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { getClassificationApi, getLiteratureListApi } from '@/api/literature/index';

  const router = useRouter();

  const filtersExpanded = ref(false);
  const classificationOptions = ref<any[]>([]);

  const searchParams = ref({
    title: '',
    category: '',
  });

  /* 分页参数 */
  const pageNum = ref(1);
  const pageSize = 10;
  const loading = ref(false);
  const isLastPage = ref(false);
  const pages = ref(0);
  const dataList = ref<any[]>([]);

  /* 获取分类列表 */
  async function loadClassifications() {
    try {
      const data: any = await getClassificationApi();
      classificationOptions.value = data || [];
    } catch (error) {
      console.error('获取分类失败:', error);
    }
  }

  /* 切换筛选区域展开/收起 */
  function toggleFilters() {
    filtersExpanded.value = !filtersExpanded.value;
  }

  /* 选择筛选条件 */
  function selectFilter(type: string, value: string) {
    if (searchParams.value[type] === value) {
      searchParams.value[type] = '';
    } else {
      searchParams.value[type] = value;
    }
    handleSearch();
  }

  /* 清除筛选 */
  function clearFilters() {
    searchParams.value = {
      title: '',
      category: '',
    };
    handleSearch();
  }

  /* 搜索 */
  function handleSearch() {
    resetPage();
    /* 搜索时滚动到顶部 */
    scrollToTop();
    loadData();
  }

  /* 滚动到页面顶部 */
  function scrollToTop() {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  }

  /* 加载数据 */
  async function loadData() {
    if (loading.value || isLastPage.value) return;

    loading.value = true;
    /* 滚动到顶部，避免页面闪动 */
    scrollToTop();

    try {
      const params: any = {
        pageNum: pageNum.value,
        pageSize: pageSize,
        title: searchParams.value.title,
      };

      /* 如果有分类，添加 category 参数 */
      if (searchParams.value.category) {
        params.category = searchParams.value.category;
      }

      const data: any = await getLiteratureListApi(params);
      dataList.value = data.records || [];
      pages.value = data.pages || 0;
      if (dataList.value.length < pageSize) {
        isLastPage.value = true;
      }
    } catch (error) {
      console.error('error:', error);
    } finally {
      loading.value = false;
    }
  }

  function pageUpdate(num: any) {
    pageNum.value = num;
    loadData();
  }

  /* 重置分页 */
  function resetPage() {
    pageNum.value = 1;
    isLastPage.value = false;
    /* 立即清空数据，显示加载状态，避免旧数据闪烁 */
    dataList.value = [];
  }

  /* 查看文献详情 */
  function viewLiterature(paper: any) {
    router.push({
      name: 'literature_detail',
      query: {
        id: paper.id,
      },
    });
  }

  onMounted(() => {
    loadClassifications();
    loadData();
  });
</script>

<style lang="less" scoped>
  .literature-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  /* 筛选区域 */
  .filter-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 30px;
    overflow: hidden;
  }

  .filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f7fafc;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .filter-header:hover {
    background: #edf2f7;
  }

  .filter-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #2d3748;
    font-weight: 600;
  }

  .toggle-icon {
    font-size: 12px;
    color: #718096;
    transition: transform 0.3s;
  }

  .toggle-icon.expanded {
    transform: rotate(180deg);
  }

  .filter-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    display: none;
  }

  .filter-content.expanded {
    max-height: 1000px;
    display: block;
    padding: 20px;
  }

  .filter-group {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    gap: 20px;
  }

  .filter-label {
    min-width: 100px;
    font-weight: 600;
    color: #2d3748;
    padding-top: 8px;
  }

  .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
  }

  .filter-option {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: white;
    color: #4a5568;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
  }

  .filter-option:hover {
    border-color: #3182ce;
    color: #3182ce;
  }

  .filter-option.active {
    background: #3182ce;
    color: white;
    border-color: #3182ce;
  }

  .filter-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
  }

  .clear-btn {
    padding: 10px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f7fafc;
    color: #4a5568;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
  }

  .clear-btn:hover {
    background: #edf2f7;
  }

  /* 结果统计 */
  .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #e2e8f0;
  }

  .results-info {
    color: #4a5568;
    font-size: 14px;
  }

  /* 论文列表 */
  .literature-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 30px;
  }

  .literature-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .literature-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    border-color: #3182ce;
  }

  .paper-content {
    flex: 1;
  }

  .paper-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .paper-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .paper-authors,
  .paper-subjects {
    font-size: 14px;
    color: #4a5568;
  }

  .meta-label {
    font-weight: 500;
    color: #718096;
  }

  .meta-value {
    color: #2d3748;
  }

  .paper-link {
    display: flex;
    align-items: center;
    padding-left: 20px;
  }

  .link-icon {
    font-size: 24px;
    color: #3182ce;
    transition: transform 0.3s;
  }

  .literature-item:hover .link-icon {
    transform: translateX(5px);
  }

  /* 加载状态 */
  .loading {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #3182ce;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* 空状态 */
  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #7f8c8d;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
  }

  .empty-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #95a5a6;
  }

  .empty-desc {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
  }

  /* 分页 */
  .pagination-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }

  .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .pagination-btn,
  .pagination-page {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    color: #4a5568;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
  }

  .pagination-btn:hover:not(:disabled) {
    border-color: #3182ce;
    color: #3182ce;
  }

  .pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .pagination-page {
    min-width: 40px;
    text-align: center;
  }

  .pagination-page:hover {
    border-color: #3182ce;
    color: #3182ce;
  }

  .pagination-page.active {
    background: #3182ce;
    color: white;
    border-color: #3182ce;
  }

  .pagination-pages {
    display: flex;
    gap: 8px;
  }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .literature-page {
      padding: 15px;
    }

    .filter-group {
      flex-direction: column;
      gap: 10px;
    }

    .filter-label {
      min-width: auto;
    }

    .paper-meta {
      flex-direction: column;
    }

    .literature-item {
      flex-direction: column;
      align-items: flex-start;
    }

    .paper-link {
      padding-left: 0;
      padding-top: 15px;
    }

    .pagination {
      flex-wrap: wrap;
      justify-content: center;
    }
  }
</style>
